<template>
    <image @click="click" :lazy-load="true" :style="{'height':height + 'rpx','width':width + 'rpx','border-radius':circle ? height/2 + 'rpx' : border_radius + 'rpx','border': circle ? 'solid 1rpx white' : '' }" :src="imageSrc" :mode="mode" @error="error" @load="load" style="height:100%p;width:100%p"></image>
</template>

<script>
	import {rpx2px,is_empty_string} from "../utils/utils.js"
    export default {
        name: 'fl_image',
        props: {
			avatar:{
				type:Boolean,
				default:false
			},
			circle:{
				type: Boolean,
				default: false
			},
			border_radius:{
				type: String,
				default:"8"
			},
            src: {
                type: String,
                
            },
			height:{
				type:String
			},
			width:{
				type:String
			},
            errorSrc: {
                type: String,
                default: '/static/common/pic_placeholder.png'
            },
            mode: {
                type: String,
                default: 'aspectFill'
            },
			loadingSrc:{
				type: String,
				default: '/static/common/pic_placeholder.png'
			},
			compress:{
				type:Boolean,
				default:false
			}
        },
        data() {
            return {
                imageSrc: '',
				has_error:false,
				skip:false
				// has_error:false
            };
        },
		watch:{
			src(val){
				this.imageSrc = val;
				// this.has_error = false
			}
			// src(val){
			// 	this.imageSrc = this.src;
			// }
		},
        methods: {
			click(e){
				this.$emit("click",e)
			},
            error(e) {
				// this.imageSrc = this.errorSrc;
				// this.$emit("error", e);
				// this.has_error = true
				if(!this.has_error){ //如果传的 src不为空，则是 获取的图片不存在或者访问不到
					this.imageSrc = this.avatar ? '/static/common/img_default.png' : '/static/common/pic_placeholder.png' // .errorSrc
				}
				// if(!this.has_error){
				// 	// console.log("error=====")
				// 	// console.log(e)
				// 	this.imageSrc = this.errorSrc;
				// 	this.$emit("error", e);
				// 	this.has_error = true
				// }else{
				// 	return
				// }               
            },
            load(e) {
				if(this.skip)return
				// console.log("加载完毕")
				if(this.has_error){ //如果出错，使用error图片
					// this.imageSrc = this.errorSrc //"https://usms.oss-cn-shanghai.aliyuncs.com/aido-pics/image_cropper_91DB7F91-D491-489F-B70E-587F34435231-5445-00000271C8492646.1625805685715.jpg"
				}
				if(this.imageSrc == this.loadingSrc){ //如果加载好的图片 是加载中的图片
					this.imageSrc = this.src
				}
				// console.log(e)
				// if(this.src == null || this.src == ""){
					
				// 	this.imageSrc = this.errorSrc //"https://usms.oss-cn-shanghai.aliyuncs.com/aido-pics/image_cropper_91DB7F91-D491-489F-B70E-587F34435231-5445-00000271C8492646.1625805685715.jpg"
				// }else{
				// 	this.imageSrc = this.src;
				// 	this.$emit("load", e);
				// }
            }
        },
        created() {
            
			if(is_empty_string(this.src)){
				// console.log("记载失败"+this.src)
				this.has_error = true
				this.skip = true
				this.imageSrc = this.avatar ? '/static/common/img_default.png' : '/static/common/pic_placeholder.png' // .errorSrc //"https://usms.oss-cn-shanghai.aliyuncs.com/aido-pics/image_cropper_91DB7F91-D491-489F-B70E-587F34435231-5445-00000271C8492646.1625805685715.jpg"
			}else{
				this.imageSrc = this.loadingSrc;
			}
			// 压缩图片使用
			if(this.compress == true){
				let width = parseInt(this.width)
				let height = parseInt(this.height)
				let w = rpx2px(width)
				let h = rpx2px(height)
				this.imageSrc = this.get_ali_pic(this.src,h,w)
			}
			
        }
    }
</script>

<style>

</style>
